<template>
  <div class="home">
		<el-container>
		  <el-header>
			  <div class="title">东软颐养中心</div>
			  <div class="userInfo">
				  <el-dropdown @command="commandHandler">
				    <span class="el-dropdown-link">
				      {{staffname}}<i class="el-icon-arrow-down el-icon--right"></i>
				    </span>
				    <el-dropdown-menu slot="dropdown">
				      <el-dropdown-item command='userinfo'>个人信息</el-dropdown-item>
				      <el-dropdown-item command='setting'>设置</el-dropdown-item>
				      <el-dropdown-item command='logout'>退出登录</el-dropdown-item>
				    </el-dropdown-menu>
				  </el-dropdown>
			  </div>
		  </el-header>
		  <el-container>
		    <el-aside width="200px">
				<Menu></Menu>
			</el-aside>
		    <el-main>
				<router-view></router-view>
			</el-main>
		  </el-container>
		</el-container>
  </div>
</template>

<script>

import Menu from '../components/menu.vue'

export default {
  name: 'Home',
  data(){
	  return{
		  staffname:window.sessionStorage.getItem('name')
	  }
  },
  components: {
	Menu
  },
  methods:{
	commandHandler(command){
		if(command=='logout'){
			this.$confirm('此操作将注销登陆, 是否继续?', '提示', {
			          confirmButtonText: '确定',
			          cancelButtonText: '取消',
			          type: 'warning'
			        }).then(() => {
			          this.postRequest('/logout');
			          window.sessionStorage.removeItem('tokenStr');
			          window.sessionStorage.removeItem('user');
			          this.$router.replace('/');
			        }).catch(() => {
			          this.$message({
			            type: 'info',
			            message: '已取消注销'
			          });          
			        });
			
		}
	}
  }
}
</script>

<style>
	*{
		padding: 0;
		margin: 0;
	}
	  .el-header, .el-footer {
	    background-color: #B3C0D1;
	    color: #333;
	    text-align: center;
	    line-height: 60px;
	  }
	  
	  .el-aside {
	    background-color: #D3DCE6;
	    color: #333;
	    text-align: center;
	    line-height: 200px;
	  }
	  
	  .el-main {
	    background-color: #E9EEF3;
	    color: #333;
	    text-align: center;
	    line-height: 160px;
	  }
	  
	  body > .el-container {
	    margin-bottom: 40px;
	  }
	  
	  .title{
		 font-size: 25px;
		 font-family:华文楷体;
		 display: flex;
	  }
	  .userInfo{
		 margin-top: -60px;
		 margin-right: -800px;
	  }
	  .el-dropdown-link{
		  font-size: 15px;
		  font-family: 华文楷体;
	  }
</style>
